<template>
    <div class="content-wrapper-view">
        <div class="content-wrapper-body">
            <div class="filter-wrapper">
                <el-form ref="filterForm" :model="listQuery" :inline="true">
                    <el-form-item prop="roleName" size="medium">
                        <el-input v-model="listQuery.roleName" placeholder="关键字"></el-input>
                    </el-form-item>

                    <el-button type="primary" size="medium" icon="el-icon-search">搜索</el-button>
                    <el-button type="primary" size="medium" icon="el-icon-mars-reset">重置</el-button>
                    <el-button type="primary" size="medium" icon="el-icon-plus">添加</el-button>
                    <el-button type="danger" size="medium" icon="el-icon-delete">批量删除</el-button>
                </el-form>
            </div>

            <el-table :data="list" :key="tableKey" border fit highlight-current-row v-loading="listLoading" element-loading-text="给我一点时间" empty-text="-" @selection-change="handleSelectionChange">

                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column type="index" width="55" align="center"></el-table-column>

                <el-table-column label="名称" align="center">
                    <template slot-scope="scope"> {{ scope.row.roleName }}</template>
                </el-table-column>
                <el-table-column label="编码" align="center">
                    <template slot-scope="scope"> {{ scope.row.roleCode }}</template>
                </el-table-column>
                <el-table-column label="备注" align="center">
                    <template slot-scope="scope"> {{ scope.row.roleDesc }}</template>
                </el-table-column>
                <el-table-column label="创建时间" align="center">
                    <template slot-scope="scope"> {{ scope.row.ctime | parseTime('{y}-{m}-{d} {h}:{i}')}}</template>
                </el-table-column>
                <el-table-column label="最后更新时间" align="center">
                    <template slot-scope="scope"> {{ scope.row.utime | parseTime('{y}-{m}-{d} {h}:{i}') }}</template>
                </el-table-column>

                <el-table-column label="操作" width="250" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" icon="edit" @click="handleAuthorize(scope.row)">分配权限</el-button>
                        <el-button size="small" type="primary" icon="edit" @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" icon="delete" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div v-if="!listLoading" class="pagination-container">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: "Table",
    data() {
        return {
            listQuery: {}
        };
    }
};
</script>

<style scoped>
</style>